<template>
  <div class="detailes-page">
    <!-- 计算中 -->

    <detail-header ref="detailHeader" :info_parent.sync="info"></detail-header>
    <!-- 分类、指数、表单 -->
    <div class="nav flex-h-sb">
      <div class="nav-right flex-v-center">
        <span style="font-size: 14px; color: #606266; font-weight: 700">
          对比指标：
        </span>
        <indexSelectTree
          style="margin: 0 30px 0 10px"
          :indexType.sync="dataForm.types"
          :maxNum="5"
          size="small"
          :clearable="false"
          @contrastOptionsObj="contrastOptionsObj"
          :width="300"
        ></indexSelectTree>
        <el-button size="small" type="primary" @click="saveParamsHandle">
          应用
        </el-button>
        <el-button size="small" @click="refresh">重置</el-button>
      </div>
    </div>
    <!-- 历史走势图 -->
    <lineEcahrts
      ref="lineEcarts"
      @viewObjHandle="viewObjHandle"
      @beyondIncome2Change="beyondIncome2ChangeHandle"
      :chart_date_parent.sync="chart_date"
      :indexTypes="dataForm.types"
      :one_contrastOptions_list_parent="one_contrastOptions_list"
    ></lineEcahrts>
    <!-- 收益风险指标 -->
    <riskTable
      ref="riskTable"
      :indexTypes="dataForm.types"
      :chart_date_parent="chart_date"
      :chart1List="chart1List"
      :contrastOptionsObj="contrastOptions_obj"
    ></riskTable>
    <!-- 收益图表 -->
    <earnTable
      ref="earnTable"
      :contrastOptions_obj_parent="contrastOptions_obj"
      :indexTypes="dataForm.types"
      :one_contrastOptions_list_parent="one_contrastOptions_list"
    ></earnTable>
    <!-- 历史净值 -->
    <netWorthTable ref="netWorthTable"></netWorthTable>
    <profitLossDialog
      v-if="classifyId"
      :profitLossDialogVisible.sync="profitLossDialogVisible"
      :investId="classifyId"
      :level="2"
    ></profitLossDialog>
    <!-- :investId="classifyId" -->
    <!-- :level="2"  分类-->
    <div class="fixTipReport" @click="profitLossDialogVisible = true">
      <i class="iconfont icon-ziliaoduibi"></i>
      <span>盈亏报告</span>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import { parseTime } from "@/utils";
import { deepClone } from "@/utils";
import detailHeader from "./detail-header.vue";
import lineEcahrts from "./lineEcahrts.vue";
import indexSelectTree from "@/components/investComn/indexSelectTree.vue";
import riskTable from "./riskTable.vue";
import mixin from "./mixins";
import { riskIndexCalc } from "@/utils/pro";
import earnTable from "./earnTable.vue";
import netWorthTable from "./netWorthTable.vue";
import profitLossDialog from "@/views/afterManage/component/profitLossDialog.vue";

export default {
  mixins: [mixin],
  name: "StrategyCombManageDetails",
  components: {
    detailHeader,
    indexSelectTree,
    lineEcahrts,
    riskTable,
    earnTable,
    netWorthTable,
    profitLossDialog,
  },

  data() {
    return {
      profitLossDialogVisible: false,
      dataForm: {
        types: [],
      },
      info: {},
      contrastOptions_obj: {},
      chart_date: [],
      oldDate: [],
      chart1List: [],
      list_riskIndicators: [], // 收益风险指标
      _list_riskIndicators: [], // 保存基础 收益风险指标
      one_contrastOptions_list: [],
    };
  },
  created() {},
  watch: {
    chart1List: {
      handler(newVal, oldVal) {
        this.$refs.riskTable.init(this.info);
      },
    },
    info: {
      handler(newVal, oldVal) {
        // 多开标签 设置
        this.tempRoute = Object.assign({}, this.$route);
        this.$setTagsViewTitle(
          this.tempRoute,
          `净值分析[投资分类]-${newVal.classfyName}`
        );
        document.title = `净值分析[投资分类]-${newVal.classfyName}`;
        this.dataForm.types = [newVal.indexType];
        const dates = [];
        dates[0] = parseTime(newVal.classifyNetWorthBean.startDate);
        dates[1] = newVal.classifyNetWorthBean.endDate
          ? parseTime(newVal.classifyNetWorthBean.endDate)
          : parseTime(new Date());
        this.chart_date = dates;
        this.oldDate = deepClone(dates);
        this.$nextTick(() => {
          this.$refs.lineEcarts.chartInit(newVal);
          // this.$refs.riskTable.init(newVal);
          this.$refs.earnTable.init(newVal, dates);
          this.$refs.netWorthTable.init(newVal);
        });
      },
      deep: true,
    },
    chart_date: {
      handler(newVal, oldVal) {
        console.log(newVal);
      },
      deep: true,
    },
    "dataForm.types": {
      handler(newVal, oldVal) {
        if (newVal.length > 5) {
          this.$message({
            message: "最多选择5个对比指标",
            type: "warning",
            duration: 2000,
          });
          this.$nextTick(() => {
            this.dataForm.types = oldVal;
          });
        } else {
          this.contrastOptionsObj();
        }
      },
      deep: true,
    },
  },
  methods: {
    realContrastHnadle() {
      this.$refs.detailHeader.realContrast();
    },
    clearRealquery(val) {
      this.realquery = val;
    },
    saveParamsHandle() {},
    beyondIncome2ChangeHandle(val) {
      this.dataForm.types = [val, ...this.dataForm.types];
    },
    contrastOptionsObj(obj) {
      if (obj) {
        this.contrastOptions_obj = obj;
      } else {
        obj = this.contrastOptions_obj;
      }
      if (Object.keys(obj).length && this.dataForm.types.length) {
        const oneList = [];
        this.dataForm.types.forEach((item) => {
          oneList.push({
            id: item,
            name: obj[item],
          });
        });
        this.one_contrastOptions_list = oneList;
      }
      if (this.chart_date[0]) {
        this.$nextTick(() => {
          // this.$refs.lineEcarts.getnetWorthLine(
          //   this.chart_date[0],
          //   this.chart_date[1],
          // )
        });
      }
    },
    viewObjHandle(data) {
      this.chart1List = riskIndexCalc(data);

      this.list_riskIndicators = this.riskRecursionHandle(
        this.chart1List,
        this.list_riskIndicators
      );
      this.list_riskIndicators_key++;
    },
    riskRecursionHandle(resList, list) {
      list.map((items, i) => {
        const resList_i = resList.findIndex((item) => item.name == items.name);
        if (resList_i != -1) {
          const res = resList[resList_i];
          list[i] = {
            strategyId: items.strategyId,
            classifyId: items.classifyId,
            children: items.children,
            rowKey: items.rowKey,
            weight: items.weight,
            initMoney: items.initMoney,
            nominalAmount: items.nominalAmount,
            ...res,
          };
        } else if (items.children) {
          // 分类
          items.children.forEach((_) => {
            list[i] = {
              annualFluctuationsRate: "--",
              sharpeRate: "--",
              maxBackIncomDay: "--",
              maximumDrawdownRate: "--",
              calmarRate: "--",
              investWinningRate: "--",
              ...list[i],
            };
          });
        }
        if (items.children) this.riskRecursionHandle(resList, items.children);
      });
      return list;
    },
    refresh() {
      location.reload();
    },
  },
};
</script>
<style lang="scss" scoped>
.detailes-page {
  padding: 20px;
  min-height: 100vh;
  background: #f0f2f5;
}
.title {
  padding: 20px;
  text-align: center;
  font-size: 26px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #262626;
}
.nav {
  height: 56px;
  margin-top: 20px;
  padding: 0 24px;
  background: #ffffff;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  .nav-left {
    font-size: 18px;
    font-weight: 400;
    color: #262626;
    .nav-item {
      font-family: PingFangSC-Regular, PingFang SC;
      cursor: pointer;
      line-height: 56px;
      & + .nav-item {
        margin-left: 48px;
      }
    }
  }
}
</style>
